<script setup>
import { ref, computed, watch } from "vue";

//复用函数
//1. 更新本地缓存
const updateLocalStorage = function () {
  localStorage.setItem("todoList", JSON.stringify(todoList.value));
};
//2. 读取本地缓存
const getLocalStorage = function () {
  const localTodoList = localStorage.getItem("todoList");
  if (localTodoList) {
    return JSON.parse(localTodoList);
  }
  return [];
};

//输入框变量
const inputWord = ref("");
//待办事项列表变量
const todoList = ref([]);

//读取本地缓存：初始化数据
todoList.value = getLocalStorage();

//更新本地缓存：使用侦听器,深度监听
watch(todoList, updateLocalStorage, { deep: true });

//添加事件
const addTodo = () => {
  const text = inputWord.value;
  if (text === "") {
    return;
  }
  const newTodo = { id: todoList.value.length, text, isDone: false };
  todoList.value.push(newTodo);
  inputWord.value = "";
};

//删除事件
const delTodo = (id) => {
  const index = todoList.value.findIndex((todo) => todo.id === id);
  if (index !== -1) {
    todoList.value.splice(index, 1);
  }
};

//按下回车后添加事件
const keydownAddTodo = (event) => {
  if (event.key == "Enter") {
    //使用lazy的话在这里要触发修改，否则会导致输入框内容丢失，不使用lazy默认监听keydouwn事件
    //inputWord.value = event.target.value;
    addTodo();
  }
};

//清除已办事项
const clearDone = () => {
  todoList.value = todoList.value.filter((todo) => !todo.isDone);
};
//清除所有事项
const clearAll = () => {
  todoList.value = [];
};

//全选/全不选 :这里能不能用双向绑定实现.不好做，不能直接更改计算属性
const setDoneAll = () => {
  //保存切换时的状态
  const oldIsAllDone = isAllDone.value;
  todoList.value.forEach((todo) => {
    todo.isDone = !oldIsAllDone;
  });
};

//计算属性
//1. 已办事项数量
const doneCount = computed(() => {
  return todoList.value.filter((todo) => todo.isDone).length;
});
//2. 是否全部事项已办
const isAllDone = computed(() => {
  return todoList.value.every((todo) => todo.isDone);
});
</script>

<template>
  <div class="contanier">
    <div class="main">
      <h1>TODO List</h1>
      <div class="input-box">
        <input
          type="text"
          placeholder="请输入待办事项"
          v-model.trim="inputWord"
          @keydown="keydownAddTodo"
        />
        <button @click="addTodo">添加</button>
      </div>
      <ul>
        <li
          v-for="todo in todoList"
          :key="todo.id"
          :class="{ checked: todo.isDone }"
        >
          <input type="checkbox" v-model="todo.isDone" />
          <span>{{ todo.text }}</span>
          <button class="del-btn" @click="delTodo(todo.id)">删除</button>
        </li>
        <li class="all">
          <input type="checkbox" :checked="isAllDone" @change="setDoneAll()" />
          <span>已办事项{{ doneCount }}/全部事项{{ todoList.length }}</span>
          <button class="del-get-btn" @click="clearDone">清除已办</button>
          <button @click="clearAll">清除所有</button>
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped>
.contanier {
  height: 100vh;
  /* 渐变背景 */
  background: linear-gradient(to bottom, #f7f7f7, #12423b);
}

.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80%;
  max-width: 800px;
  min-width: 500px;
  margin: 0 auto;
  /* 渐变背景 */
  background-color: linen;
}

.main ul {
  width: 90%;
  list-style: none;
  padding-left: 0;
}

.main ul li {
  display: flex;
  background-color: #bda0a0;
  margin: 5px 0;
  padding: 5px 15px;
  border-radius: 5px;
  border-bottom: 2px solid #702727;
}

.main ul li.checked span {
  color: red;
  text-decoration: line-through;
}

.main ul li button {
  margin-right: 5px;
}
.main ul li .del-btn {
  margin-left: auto;
}

.main ul li.all {
  margin-top: 30px;
}

.main ul li.all .del-get-btn {
  margin-left: auto;
}
</style>